<template>
<!-- 每个组件必须有一个根标签 -->
  <div class="login-bg">
    <el-row type="flex" justify="center" align="middle" style="height: 100%">
        <el-card class="product-card" style="min-width: 480px;min-height: 300px;margin-bottom: 0" shadow="always">
          <div class="product-title">校园二手交易平台</div>
          <el-form
              ref="Form"
              style="max-width: 600px"
              :model="form"
              :rules="rules"
              label-width="auto"
          >
            <!--     用户名       -->
            <el-form-item label="邮箱" prop="email">
              <el-input
                  prefix-icon="el-icon-user"
                  v-model="form.email"
                  style="width: 100%"
                  placeholder="请输入邮箱"
              />
            </el-form-item>
            <!--     密码输入框       -->
            <el-form-item label="密码" prop="password">
              <el-input
                  prefix-icon="el-icon-key"
                  v-model="form.password"
                  style="width: 100%"
                  placeholder="请输入密码"
                  type="password"
                  show-password
              />
            </el-form-item>
            <!--     登录按钮       -->
            <div style="display: flex;align-items: center;justify-content: center">
              <el-form-item label="" class="no-margin" label-width="0" style="margin-bottom: 0">
                <el-button type="primary" @click="onLogin">登录</el-button>
              </el-form-item>
            </div>
            <!--     注册链接       -->
            <div style="display: flex;align-items: center;justify-content: right">
              <el-form-item label-width="0" style="margin-bottom: 0">
                <span>没有账号？
                  <el-link type="primary" @click="$router.push('/register')">去注册</el-link>
                </span>
              </el-form-item>
            </div>
          </el-form>
        </el-card>
    </el-row>
  </div>
</template>


<script>
import {apiLogin} from "@/api/api";

export default {
  created() {

  },
  data(){
    return {
      // 登录表单的数据
      form: {
        username: "",
        password: ""
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'change' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '邮箱格式错误', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, message: '密码长度应大于等于 6', trigger: 'change' },
        ]
      }
    }
  },

  methods: {
    onLogin(){
      // 对表单验证，根据是rules
      this.$refs.Form.validate(valid => {
        if (valid){
          apiLogin(this.form).then(res => {
            if (res?.code === 200){
            // 存储token
              localStorage.setItem("token", res.data.token);
              // 将用户信息保存到本地
              localStorage.setItem("user", JSON.stringify(res.data.user));
              this.$bus.$emit('user-change');
              this.$message.success("登录成功");
            // 路由
              this.$router.push("/");
            }else{
              // console.log(res)
              this.$message.error(res.message);
            }
          });
        }else{
          this.$message.error("请正确填写表单！");
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.login-bg{
  //background: linear-gradient(120deg, #f0f4f8 0%, #abdeff 100%);
  height: 100%;
  background: url("@/assets/bg/bg.png");
  background-size: 100%;
}

.product-card{
  border-radius: 16px;
  padding: 32px 24px 0;
  box-shadow: 2px 4px 10px rgba(64, 158, 255, 0.5) !important
}

.product-title{
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 24px;
  text-shadow: 1px 2px 5px rgba(0, 0, 139, 0.4);
}

</style>